<template>
	<el-card shadow="always" class="ne-cust-item-card">
		<el-row class="title">
			<el-col :span="18">
				<el-radio v-model="radioA" :label="item.id">
					<a href="javascript:;" @click="checkOrderItems">客户名称</a>
				</el-radio>
			</el-col>
			<el-col :span="6" class="box-right-icon">
          <svg-icon iconClass="warn3" className="big-icon"/>
			</el-col>
		</el-row>
		<div class="list-info-list">
			<el-row class="list-info">
				<span class="list-info-1">客户编码：</span>
				<span class="list-info-2">000</span>
			</el-row>
			<el-row class="list-info">
        <a class="ne-a-link" @click="showProducts">
          <span class="list-info-1">电路数量：</span>
          <span class="list-info-2">000</span>
        </a>
			</el-row>
			<el-row class="list-info" :gutter="10">
				<el-col :span="8">
            <span class="list-info-1">营销责任地：</span>
            <span class="list-info-2">000</span>
				</el-col>
			</el-row>
		</div>
		<el-dialog title="产品列表" :visible.sync="productsVisible">
			<el-table ref="singleTable" :data="productsData" highlight-current-row @current-change="handleCurrentChange">
				<el-table-column property="productName" label="产品名称"> </el-table-column>
				<el-table-column property="cdNum" label="电路数量" class="blue"> </el-table-column>
			</el-table>
		</el-dialog>
	</el-card>
</template>

<script>
export default {
	name: "OrderItemCard",
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	data() {
		return {
			radioA: "1",
			currentProductRow: null,
			productsVisible: false,
			productsData: [
				{ productName: "产品1", cdNum: "100" },
				{ productName: "产品2", cdNum: "100" },
			],
		};
	},
	methods: {
		findMessage(id) {
			this.$emit("findMessage", id);
		},
		/**
		 * 查看销售品信息
		 */
		checkOrderItems() {
			//this.orderItemsVisible = true;
		},
		/**
		 * 弹出产品级列表
		 */
		showProducts() {
      //接口暂未提供：这里要通过接口实时更新产品列表
			this.productsVisible = true;
		},

		/**
		 * 选择产品后
		 */
		handleCurrentChange(val) {
			this.currentProductRow = val;
			this.productsVisible = false;
			this.$emit("productChange", this.currentProductRow);
		},
	},
};
</script>

<style lang="scss" scoped>
  .ne-cust-item-card{
    .ne-a-link{
      .list-info-2{
        color: blue!important;
      }
    }
  }
  .blue{
    color:#cad5fc
  }
</style>
